<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<!-- 使用UTF-8 -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<!-- 设置移动终端可视区域 -->
		<meta content="telephone=no" name="format-detection">
		<!-- 禁止iPhone等手机自动将数字变成可点击的拨号连接 -->
		<title>投诉</title>
		<link href="css/style.css" type="text/css" rel="stylesheet" />
		<link href="css/weui.css" type="text/css" rel="stylesheet" />
	</head>
	<body style="background: #F6F6F6;">
		<div class="complaint" id="containerVue" v-cloak>
			<div class="headerView">
				<i onclick="closeView()">&#139;</i>
				<h1>"966588"查询系统</h1>
				<div></div>
			</div>
			<div class="title">{{title}}</div>
			<div class="cont">
			<div class="complaintText">
				<div class="left">接件人员</div>
				<div class="right">{{info.busUserName}}</div>
			</div>
				<div class="complaintText">
					<div class="left">计划开始日期</div>
					<div class="right">{{startTime}}</div>
				</div>
				<div class="complaintText">
					<div class="left">计划完成日期</div>
					<div class="right">{{planTime}}</div>
				</div>
				<!-- <div class="select clearfix">
					<div class="nav" v-for="(item) in cause" :class="[item.isShow?'active':'']" @click="causeSelect(item)">{{item.title}}</div>
				</div> -->
				<div class="complaintText">
					<div class="left">投诉意见</div>
					<div class="right">
						<div v-if="causeSel.length == 0" @click="causeClick" class="pleaseSel">请选择</div>
						<div v-else @click="causeClick">
							<div class="nav" v-for="item in causeSel">{{item.title}}</div>
						</div>
						<!-- 投诉原因选择 -->
						<div class="selectView" v-if="causeBoole">
							<div class="ulView">
								<div class="title">意见类型标签（多选）</div>
								<div class="ul">
									<div class="li" v-for="(item) in cause" :class="[item.isShow?'active':'']" @click="causeSelect(item)">
										<img src="./image/select.png" alt="">
										<img src="./image/selected.png" class="check" alt="">
										<div>{{item.title}}</div>
									</div>
								</div>
								<div class="selectbtn">
									<!-- <div @click="causeBoole = false">取消</div> -->
									<div @click="selectCause" style="color: #2e84db;">确定</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="textarea">
					<div class="label" style="top: .5rem;">情况描述</div>
					<textarea placeholder="提出投诉建议，感谢您的参与！如有不清楚的问题,请联系02367959705~~~" v-model="param.description"></textarea>
				</div>
			</div>

			<div class="btn">
				<a class="serverText" href="tel:02367959705">客服电话: 02367959705</a>
				<div class="btn_div" @click="submitBefore" v-if="submitOnce == true">提交</div>
				<div class="btn_div" v-if="submitOnce == false" style="background-color: #ccc;">提交</div>
				<div class="btn_div reset" @click="reset">重置</div>
			</div>
			<div class="js_dialog" style="opacity: 1;" v-if="tipBoole">
				<div class="weui-mask"></div>
				<div class="weui-dialog" style="border-radius: 20px;">
					<div class="weui-dialog__hd"><strong class="weui-dialog__title">提示</strong></div>
					<div class="weui-dialog__bd">
						<span style="text-align: left;display: block;line-height: 2;">您的投诉已受理,我们会尽快与您联系!</span>
						<img src="image/message.png" alt="" style="width: 6rem;margin: .5rem auto .75rem;">
					</div>
					<div class="weui-dialog__ft">
						<div @click="tipBoole = false" class="weui-dialog__btn weui-dialog__btn_default" style="background-color: #ededed;color: #676767;">取消</div>
						<div @click="submit" class="weui-dialog__btn weui-dialog__btn_primary" style="background-color: #0787d5;color: #fff;">确定</div>
					</div>
				</div>
			</div>
		</div>
		<script src="script/jquery-3.5.js"></script>
		<script src="script/vue.js"></script>
		<script src="script/api.js"></script>
		<script src="script/ajax.js"></script>
		<script>
			var app = new Vue({
				el: '#containerVue',
				data: {
					info: JSON.parse(sessionStorage.getItem('compInfo')), // 详情信息
					param: {
						projectId: "",
						complaintReason: '',
						description: ''
					}, // 提交条件
					title: "",
					startTime: "",
					planTime: "",
					complaintInfo: {},
					cause: [], // 投诉原因
					causeSel: [], // 选择投诉原因
					causeBoole: false,
					tipBoole: false, // 投诉确认框
					submitOnce: true,
				},
				created() {
					this.param.projectId = this.info.id;
					this.title = this.info.name;
					this.startTime = this.info.startTime;
					this.planTime = this.info.planCompletedTime;
					this.getList();
				},
				watch: {},
				methods: {
					// 获取详情
					getList() {
						var that = this;
						// 获取投诉原因
						ajaxHttp({
							url: 'jeecg-boot/sys/dict/getDictItems/NodeProjectComplaint',
							type: 'get',
							data: {},
							success: function(res) {
								if (res.success) {
									// console.log(res.result);
									res.result.forEach(item => {
										item.isShow = false
									})
									that.cause = res.result
								} else {
									$.Jwarning(res.message)
								}
							}
						})
						// // 请求投诉详情信息
						// ajaxHttp({
						// 	url: 'jeecg-boot/node/nodeProjectComplaint/getByProjectId',
						// 	type: 'post',
						// 	data: {projectId:$.Request('id')},
						// 	success: function(res) {
						// 		if (res.code == '200') {
						// 			console.log(res);
						// 			// that.cause = res.result
						// 		} else {
						// 			$.Jwarning(res.message)
						// 		}
						// 	}
						// })
					},
					// 投诉原因多选弹出
					causeClick() {
						this.causeBoole = true;
						this.causeSel = [];
						this.param.complaintReason = '';
					},
					// 投诉原因多选
					selectCause() {
						let causeArr = [];
						this.cause.forEach(item => {
							if (item.isShow) {
								causeArr.push(item.value)
								this.causeSel.push(item)
							}
						})
						this.param.complaintReason = causeArr.join(','); // 数组转字符串提交到后台
						this.causeBoole = false;
					},
					// 投诉原因点击
					causeSelect(item) {
						item.isShow = !item.isShow;
					},
					// 提交投诉意见
					submitBefore() {
						var that = this;
						that.submitOnce = false;
						if (this.param.complaintReason == '') {
							$.Jwarning('请选择投诉意见')
							that.tipBoole = false;
						} else {
							var param = JSON.stringify(this.param)
							ajaxHttpJson({
								url: 'jeecg-boot/node/nodeProjectComplaint/add',
								type: 'post',
								data: param,
								success: function(res) {
									that.submitOnce = true;
									if (res.code == '200') {
										$.Jsuccess('提交成功')
										setTimeout(function() {
											that.tipBoole = true;
										}, 3000)
									} else {
										$.Jwarning(res.message)
									}
								}
							})
						}
					},
					// 提交投诉意见后跳转
					submit() {
						window.history.back(-1);
					},
					// 重置投诉意见
					reset() {
						this.cause.forEach(item => {
							item.isShow = false;
						});
						this.param.description = "";
						this.causeSel = [];
						this.param.complaintReason = '';
					}
				}
			})
		</script>
	</body>
</html>
